<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script th:src="@{/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
	<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
	<script type="text/javascript" th:src="@{/mylayer.js}"></script>
	<title>我的订单</title>
</head>
<body>

	<div class="user-content__box clearfix bgf">
		<div class="title">订单中心-我的订单</div>
		<div class="order-list__box bgf">
			<div class="order-panel">
				<ul class="nav user-nav__title" role="tablist">
					<li role="presentation" class="nav-item active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">所有订单</a></li>
					<li role="presentation" class="nav-item "><a href="#pay" aria-controls="pay" role="tab" data-toggle="tab">待付款 </a></li>
					<li role="presentation" class="nav-item "><a href="#emit" aria-controls="emit" role="tab" data-toggle="tab">待发货 </a></li>
					<li role="presentation" class="nav-item "><a href="#take" aria-controls="take" role="tab" data-toggle="tab">待收货 </a></li>
					<li role="presentation" class="nav-item "><a href="#eval" aria-controls="eval" role="tab" data-toggle="tab">交易完成 </a></li>
					<li role="presentation" class="nav-item "><a href="#cancel" aria-controls="cancel" role="tab" data-toggle="tab">已取消</a></li>
				</ul>

				<div class="tab-content">
					<div role="tabpanel" class="tab-pane fade in active" id="all" >
						<table class="table text-center">
							<tr>
								<th width="660">商品信息</th>
								<th width="120">总金额</th>
								<th width="120">交易状态</th>
								<th width="120">交易操作</th>
							</tr>
							<tr class="order-item" th:each="orderVO,iterStat:${list}" >
								<td class="order_id" th:text="${orderVO.getOrderNo()}" style="display: none"></td>
								<td>
									<label class="link">
										<a  class="num" th:text="|${#dates.format(orderVO.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')} 订单号: ${orderVO.getOrderNo()}|">
										</a>
										<div class="card">
											<th:block th:each="item:${orderVO.getList()}">
												<div class="name ep2" th:text="|${item.productName}  [数量 x${item.getQuantity()} ]|"></div>
											</th:block>
										</div>
									</label>
								</td>
								<td th:text="'￥'+${orderVO.getPayment()}"><br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
								<td class="state">
									<a class="but c6" th:if="${orderVO.status==1}">等待付款</a>
									<a class="but c6" th:if="${orderVO.status==2}">待发货</a>
									<a class="but c6" th:if="${orderVO.status==3}">待收货</a>
									<a class="but c6" th:if="${orderVO.status==4}">交易完成</a>
									<a class="but c6" th:if="${orderVO.status==0}">交易取消</a>
								</td>
								<td class="order">
									<div class="del_class del link" th:if="${orderVO.status==0 or orderVO.status==4}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
									<a   class="but but-primary pay_class link" th:if="${orderVO.status==1}">立即付款</a>
									<a  class="but but-primary take_class link" th:if="${orderVO.status==3}">确认收货</a>
									<a  class="but but-primary refund_class link" th:if="${orderVO.status==4 or orderVO.status==2 or orderVO.status==3}">退货/退款</a>
									  
									<a  class="but c3 cancel_class link" th:if="${orderVO.status==1 }">取消订单</a>
								</td>
							</tr>
						</table>
						<div class="page text-right clearfix" style="margin-top: 40px">

						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="pay">
						<table class="table text-center">
							<tr>
								<th width="660">商品信息</th>
								<th width="120">总金额</th>
								<th width="120">交易状态</th>
								<th width="120">交易操作</th>
							</tr>
							<tr class="order-item" th:each="orderVO,iterStat:${list}" th:if="${orderVO.status==1}" >
								<td class="order_id" th:text="${orderVO.getOrderNo()}" style="display: none"></td>
								<td>
									<label class="link">
										<a  class="num" th:text="|${#dates.format(orderVO.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')} 订单号: ${orderVO.getOrderNo()}|">
										</a>
										<div class="card">
											<th:block th:each="item:${orderVO.getList()}">
												<div class="name ep2" th:text="|${item.productName}  [数量 x${item.getQuantity()} ]|"></div>
											</th:block>
										</div>
									</label>
								</td>
								<td th:text="'￥'+${orderVO.getPayment()}"><br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
								<td class="state">
									<a class="but c6" th:if="${orderVO.status==1}">等待付款</a>
									<a class="but c6" th:if="${orderVO.status==2}">待发货</a>
									<a class="but c6" th:if="${orderVO.status==3}">待收货</a>
									<a class="but c6" th:if="${orderVO.status==4}">交易完成</a>
									<a class="but c6" th:if="${orderVO.status==0}">交易取消</a>
								</td>
								<td class="order">
									<div class="del" th:if="${orderVO.status==0 or orderVO.status==4}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
									<a   class="but but-primary pay_class link" th:if="${orderVO.status==1}">立即付款</a>
									<a  class="but but-primary refund_class link" th:if="${orderVO.status==4 or orderVO.status==2 or orderVO.status==3}">退货/退款</a>
									 
									<a  class="but c3 cancel_class link" th:if="${orderVO.status==1 }">取消订单</a>
								</td>
							</tr>
						</table>
						<div class="page text-right clearfix" style="margin-top: 40px">

						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="emit">
						<table class="table text-center">
							<tr>
								<th width="660">商品信息</th>
								<th width="120">总金额</th>
								<th width="120">交易状态</th>
								<th width="120">交易操作</th>
							</tr>
							<tr class="order-item" th:each="orderVO,iterStat:${list}" th:if="${orderVO.status==2}" >
								<td class="order_id" th:text="${orderVO.getOrderNo()}" style="display: none"></td>
								<td>
									<label class="link">
										<a  class="num" th:text="| ${#dates.format(orderVO.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')} 订单号: ${orderVO.getOrderNo()}|">
										</a>
										<div class="card">
											<th:block th:each="item:${orderVO.getList()}">
												<div class="name ep2" th:text="|${item.productName}  [数量 x${item.getQuantity()} ]|"></div>
											</th:block>
										</div>
									</label>
								</td>
								<td th:text="'￥'+${orderVO.getPayment()}"><br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
								<td class="state">
									<a class="but c6" th:if="${orderVO.status==1}">等待付款</a>
									<a class="but c6" th:if="${orderVO.status==2}">待发货</a>
									<a class="but c6" th:if="${orderVO.status==3}">待收货</a>
									<a class="but c6" th:if="${orderVO.status==4}">交易完成</a>
									<a class="but c6" th:if="${orderVO.status==0}">交易取消</a>
								</td>
								<td class="order">
									<div class="del" th:if="${orderVO.status==0 or orderVO.status==4}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
									<a   class="but but-primary pay_class link" th:if="${orderVO.status==1}">立即付款</a>
									<a  class="but but-primary refund_class link" th:if="${orderVO.status==4 or orderVO.status==2 or orderVO.status==3}">退货/退款</a>
									 
									<a  class="but c3 cancel_class link" th:if="${orderVO.status==1 }">取消订单</a>
								</td>
							</tr>
						</table>
						<div class="page text-right clearfix" style="margin-top: 40px">

						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="take">
						<table class="table text-center">
							<tr>
								<th width="660">商品信息</th>
								<th width="120">总金额</th>
								<th width="120">交易状态</th>
								<th width="120">交易操作</th>
							</tr>
							<tr class="order-item" th:each="orderVO,iterStat:${list}" th:if="${orderVO.status==3}" >
								<td class="order_id" th:text="${orderVO.getOrderNo()}" style="display: none"></td>
								<td>
									<label class="link">
										<a  class="num" th:text="| ${#dates.format(orderVO.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')} 订单号: ${orderVO.getOrderNo()}|">
										</a>
										<div class="card">
											<th:block th:each="item:${orderVO.getList()}">
												<div class="name ep2" th:text="|${item.productName}  [数量 x${item.getQuantity()} ]|"></div>
											</th:block>
										</div>
									</label>
								</td>
								<td th:text="'￥'+${orderVO.getPayment()}"><br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
								<td class="state">
									<a class="but c6" th:if="${orderVO.status==1}">等待付款</a>
									<a class="but c6" th:if="${orderVO.status==2}">待发货</a>
									<a class="but c6" th:if="${orderVO.status==3}">待收货</a>
									<a class="but c6" th:if="${orderVO.status==4}">交易完成</a>
									<a class="but c6" th:if="${orderVO.status==0}">交易取消</a>
								</td>
								<td class="order">
									<div class="del" th:if="${orderVO.status==0 or orderVO.status==4}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
									<a   class="but but-primary pay_class link" th:if="${orderVO.status==1}">立即付款</a>
									<a  class="but but-primary take_class link" th:if="${orderVO.status==3}">确认收货</a>
									<a  class="but but-primary refund_class link" th:if="${orderVO.status==4 or orderVO.status==2 or orderVO.status==3}">退货/退款</a>
									 
									<a  class="but c3 cancel_class link" th:if="${orderVO.status==1 }">取消订单</a>
								</td>
							</tr>
						</table>
						<div class="page text-right clearfix" style="margin-top: 40px">

						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="eval">
						<table class="table text-center">
							<tr>
								<th width="660">商品信息</th>
								<th width="120">总金额</th>
								<th width="120">交易状态</th>
								<th width="120">交易操作</th>
							</tr>
							<tr class="order-item" th:each="orderVO,iterStat:${list}" th:if="${orderVO.status==4}" >
								<td class="order_id" th:text="${orderVO.getOrderNo()}" style="display: none"></td>
								<td>
									<label class="link">
										<a  class="num" th:text="| ${#dates.format(orderVO.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')} 订单号: ${orderVO.getOrderNo()}|">
										</a>
										<div class="card">
											<th:block th:each="item:${orderVO.getList()}">
												<div class="name ep2" th:text="|${item.productName}  [数量 x${item.getQuantity()} ]|"></div>
											</th:block>
										</div>
									</label>
								</td>
								<td th:text="'￥'+${orderVO.getPayment()}"><br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
								<td class="state">
									<a class="but c6" th:if="${orderVO.status==1}">等待付款</a>
									<a class="but c6" th:if="${orderVO.status==2}">待发货</a>
									<a class="but c6" th:if="${orderVO.status==3}">待收货</a>
									<a class="but c6" th:if="${orderVO.status==4}">交易完成</a>
									<a class="but c6" th:if="${orderVO.status==0}">交易取消</a>
								</td>
								<td class="order">
									<div class="del_class del link" th:if="${orderVO.status==0 or orderVO.status==4}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
									<a   class="but but-primary pay_class link" th:if="${orderVO.status==1}">立即付款</a>
									<a  class="but but-primary refund_class link" th:if="${orderVO.status==4 or orderVO.status==2 or orderVO.status==3}">退货/退款</a>
									 
									<a  class="but c3 cancel_class link" th:if="${orderVO.status==1 }">取消订单</a>
								</td>
							</tr>
						</table>
						<div class="page text-right clearfix" style="margin-top: 40px">

						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="cancel">
						<table class="table text-center">
							<tr>
								<th width="660">商品信息</th>
								<th width="120">总金额</th>
								<th width="120">交易状态</th>
								<th width="120">交易操作</th>
							</tr>
							<tr class="order-item" th:each="orderVO,iterStat:${list}" th:if="${orderVO.status==0}" >
								<td class="order_id" th:text="${orderVO.getOrderNo()}" style="display: none"></td>
								<td>
									<label class="link">
										<a  class="num" th:text="| ${#dates.format(orderVO.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')} 订单号: ${orderVO.getOrderNo()}|">
										</a>
										<div class="card">
											<th:block th:each="item:${orderVO.getList()}">
												<div class="name ep2" th:text="|${item.productName}  [数量 x${item.getQuantity()} ]|"></div>
											</th:block>
										</div>
									</label>
								</td>
								<td th:text="'￥'+${orderVO.getPayment()}"><br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
								<td class="state">
									<a class="but c6" th:if="${orderVO.status==1}">等待付款</a>
									<a class="but c6" th:if="${orderVO.status==2}">待发货</a>
									<a class="but c6" th:if="${orderVO.status==3}">待收货</a>
									<a class="but c6" th:if="${orderVO.status==4}">交易完成</a>
									<a class="but c6" th:if="${orderVO.status==0}">交易取消</a>
								</td>
								<td class="order">
									<div class="del_class link" th:if="${orderVO.status==0 or orderVO.status==4}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
									<a   class="but but-primary pay_class link" th:if="${orderVO.status==1}">立即付款</a>
									<a  class="but but-primary refund_class link" th:if="${orderVO.status==4 or orderVO.status==2 or orderVO.status==3}">退货/退款</a>
									
									<a  class="but c3 cancel_class link" th:if="${orderVO.status==1 }">取消订单</a>
								</td>
							</tr>
						</table>
						<div class="page text-right clearfix" style="margin-top: 40px">

						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<div class="user-center__content" id="refund_form" style="display: none;">
		<div class="head-box">退款/退货</div>
		<div class="html-code">
			<h3>请前往 订单中心-退款/退货 查看退款流程</h3>

		</div>
	</div>
</body>
<script th:inline="javascript">
	//分页!
	$("div.tab-pane.fade").each(function(index, element) {
		var itemcount=0;
		$(element).find("tr.order-item").each(function(innerIndex, innerElement) {
			itemcount=itemcount+1;
			// 设置自定义属性 index
			$(innerElement).attr("data-index", innerIndex+1);
			if(innerIndex>=5){
				$(innerElement).css("display",'none')
			}

		});
		var page_div=$(element).find("div.page.text-right");
		page_div.attr("data-total",itemcount);
		page_div.attr("data-cur-page",1);
		var pageCount= Math.ceil(itemcount / 5);
		page_div.attr("data-pagenum",pageCount);
		if(pageCount!=0){
			var lastP = $("<a  class='toLastPage link disabled'>上一页</a>");
			var nextP = $("<a class='toNextPage link disabled'>下一页</a>");
			if(pageCount>1){
				nextP = $("<a class='toNextPage link'>下一页</a>");
			}
			$(page_div).append(lastP);
			for (var i = 1; i <= pageCount; i++) {
				if(i==1){
					$(page_div).append($("<a class='pageBtn link select' data-p="+i+">"+i+"</a>"));
				}else{
					$(page_div).append($("<a class='pageBtn link' data-p="+i+">"+i+"</a>"));
				}
			}
			$(page_div).append(nextP);
		}
	});
	//点击页码
	$('.pageBtn').click(function (){
		var thisPage=$(this).data('p')
		$(this).siblings('a.pageBtn').each(function (){
			$(this).removeClass('select');
		})
		$(this).addClass('select');
		//遍历order
		var parent_div=$(this).parents('div.page');
		var order_table=parent_div.siblings('table');
		//设置parent_div属性
		parent_div.attr("data-cur-page",thisPage);
		var total=parent_div.data('pagenum');
		var lastBtn=$(this).siblings('.toLastPage')
		var nextBtn=$(this).siblings('.toNextPage')
		console.log(thisPage)
		console.log(total)
		if(thisPage==1 && total!=1){
			lastBtn.addClass('disabled');
			lastBtn.removeClass('link');
			nextBtn.removeClass('disabled');
			nextBtn.addClass("link");
		}
		if(thisPage==total && total!=1){
			lastBtn.removeClass('disabled');
			lastBtn.addClass("link");
			nextBtn.addClass('disabled');
			nextBtn.removeClass('link');
		}
		//
		order_table.find("tr.order-item").each(function(innerIndex, innerElement) {
			var elePage=$(innerElement).data('index');
			//console.log(elePage);
			var a=5*(thisPage-1)+1
			var b=5*(thisPage-1)+5
			if(elePage>=a && elePage<=b){
				$(innerElement).css('display','');
			}else {
				$(innerElement).css('display','none');
			}
		});
		$('.link').css("cursor", "pointer");
	})
	//上一页
	$('.toLastPage').click(function (){
		var parent_div=$(this).parents('div.page');
		var thisPage=parent_div.data('curPage')-1;
		if(thisPage<1){
			thisPage=1;
		}
		$(this).siblings('a.pageBtn').each(function (){
			if($(this).data('p')==thisPage){
				$(this).click();
			}
		})
	})
	//下一页
	$('.toNextPage').click(function (){
		var parent_div=$(this).parents('div.page');
		var thisPage=parent_div.data('curPage')+1;
		if(thisPage>parent_div.data('total')){
			thisPage=parent_div.data('total');
		}
		$(this).siblings('a.pageBtn').each(function (){
			if($(this).data('p')==thisPage){
				$(this).click();
			}
		})
	})
	//支付
	$('.pay_class').click(function (){
		var parent_td=$(this).parents('td');
		var id_td=parent_td.siblings('.order_id');
		var order_no=id_td.text();
		$.post(
			[[${#request.getContextPath()}]]+"/order/updateOrder",
				{'orderNo':order_no,'status':2},
			function(data) {
				if(data.code==0){
					mylayer.okMsg("支付成功");
					setTimeout(function (){
						location.reload()
					},1500)
				}else {
					mylayer.errorMsg("支付失败");
				}
			},
			'json'
		);
	});
	//取消订单
	$('.cancel_class').click(function (){
		var parent_td=$(this).parents('td');
		var id_td=parent_td.siblings('.order_id');
		var order_no=id_td.text();
		$.post(
				[[${#request.getContextPath()}]]+"/order/updateOrder",
				{'orderNo':order_no,'status':0},
				function(data) {
					if(data.code==0){
						mylayer.okMsg("取消成功");
						setTimeout(function (){
							location.reload()
						},1500)
					}else {
						mylayer.errorMsg("取消失败");
					}
				},
				'json'
		);
	});
	//确认收货
	$('.take_class').click(function (){
		var parent_td=$(this).parents('td');
		var id_td=parent_td.siblings('.order_id');
		var order_no=id_td.text();
		$.post(
				[[${#request.getContextPath()}]]+"/order/updateOrder",
				{'orderNo':order_no,'status':4},
				function(data) {
					if(data.code==0){
						mylayer.okMsg("确认成功");
						setTimeout(function (){
							location.reload()
						},1500)
					}else {
						mylayer.errorMsg("确认失败");
					}
				},
				'json'
		);
	});
	//逻辑删除
	$('.del_class').click(function (){
		var parent_td=$(this).parents('td');
		var id_td=parent_td.siblings('.order_id');
		var order_no=id_td.text();
		$.post(
				[[${#request.getContextPath()}]]+"/order/delUnReal",
				{'id':order_no},
				function(data) {
					if(data.code==0){
						mylayer.okMsg("删除成功");
						setTimeout(function (){
							location.reload()
						},1500)
					}else {
						mylayer.errorMsg("删除失败");
					}
				},
				'json'
		);
	})

	//退款退货
	$('a.but.but-primary.refund_class.link').click(function (){
		layer.open({
			type: 1,
			title: '提示',
			area: ['75%', '75%'],
			content: $('#refund_form')
		});
		//location.href=[[${#request.getContextPath()}]]+"/order/getOrderCenterPage?p=c"
	})

	$('.link').css("cursor", "pointer");
</script>
</html>